<template>
    <div>
        <Modal width="1200"
               v-model="taskexercisesGenerateFlag"
               @on-ok="taskexercisesGenerateOk"
               @on-cancel="taskexercisesGenerateFlag = false
                          ,coursemodal.taskexercisesManagerFlag = true"
               :loading="loading1"
               :styles="{top: '100px'}" title="生成任务习题">
            <Form :label-width="120" inline>
                <FormItem label="是否为课堂习题:">
                    <i-switch v-model="isExercise">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem label="名称:">
                    <Input v-model="tsName" style="width: 360px"></Input>
                </FormItem>
                <FormItem label="备注:">
                    <Input v-model="remark" style="width: 360px"></Input>
                </FormItem>
            </Form>
                <Transfer
                :data="subjectList"
                :target-keys="targetSubList"
                :list-style="{width:'552px',height:'500px'}"
                filterable
                :titles="['所有题目','被选中的题目']"
                @on-change="handleChange1"
                ></Transfer>
        </Modal>
        <Modal width="800"
               v-model="coursemodal.taskexercisesManagerFlag"
               @on-ok="coursemodal.taskexercisesManagerFlag = false,$parent.modal.courseware = true"
               @on-cancel="coursemodal.taskexercisesManagerFlag = false,$parent.modal.courseware = true"
               :styles="{top: '100px'}"
               title="视频管理">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Button type="info"
                        style="margin-bottom: 10px"
                        @click="taskexercisesGenerateFlag = true,
                        coursemodal.taskexercisesManagerFlag = false">生成任务习题</Button>
                <Table border :columns="TaskexercisesColumns" :data="TaskexercisesList">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="">编辑</Button>
                        <Button type="error" size="small" style="margin-right: 5px" @click="">删除</Button>
                        <Button type="success" size="small" @click="">预览</Button>
                    </template>
                </Table>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        props:{
            coursemodal:{
                courseId:null,
                taskexercisesManagerFlag:false
            }
        },
        data(){
            return{
                subjectList:[],
                targetSubList:[],
                tsName:null,
                isExercise:false,
                loading1:true,
                remark:null,
                taskexercisesGenerateFlag:false,
                TaskexercisesList:[],
                TaskexercisesColumns:[
                    {
                        title:"名称",
                        key: 'tkName'
                    },
                    {
                        title: '类型',
                        render:(h,params)=>{ return <span>{params.row.exercise?"课堂习题":"章节任务"}</span> }
                    },
                    {
                        title: '备注',
                        key: 'remark'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ]
            }
        },
        methods:{
            /**
             * 获取章节任务列表
             */
            getTaskexercisesList(){
                this.http.post("/mycourse/getTaskexercisesList",this.qs.stringify({"courseId":this.coursemodal.courseId})).
                then(res=>{
                    if(res.data){
                        this.TaskexercisesList = res.data
                    }
                })
            },
            /**
             *获取该科目的所有题目
             */
            getsubList(){
                this.http.post("/mycourse/getsubList",this.qs.stringify({"courseId":this.coursemodal.courseId,"isExercise":this.isExercise}))
                .then(res=>{
                    res.data.map(m=>{
                        m.key = m.subId
                        let type = null;
                        switch (m.subType) {
                            case 0: type = "单选"
                                break;
                            case 1: type = "多选"
                                break;
                            case 2: type = "判断"
                                break;
                            case 3:  type = "填空"
                                break;
                            case 4:  type = "文本题"
                                break;
                             default :type = "阅读理解"
                                    break;
                        }
                        m.label=`(${type})[${m.remarks!=null?m.remarks:"无"}]${m.subTitle}`
                    })
                    this.subjectList = res.data

                })
            },
            handleChange1 (newTargetKeys, direction, moveKeys) {
                this.targetSubList = newTargetKeys;
            },
            /**
             * 分配好题目之后点击确定按钮
             */
            taskexercisesGenerateOk(){
                if(this.tsName==null||this.tsName==""){
                    this.loading1 = false
                    return this.$Message.error("名字不能为空")
                }
                let data = {
                    "targetSubList":this.targetSubList,
                    "tsName":this.tsName,
                    "isExercise":this.isExercise,
                    "remark":this.remark,
                    "courseId":this.coursemodal.courseId
                }
               this.http.post("/mycourse/saveAddTaskexercise",this.qs.parse(data))
                .then(res=>{
                    if(res.data){
                        this.taskexercisesGenerateFlag = false
                        this.coursemodal.taskexercisesManagerFlag = true
                    }else {
                        this.$Message.error("出错了啊！")
                    }
                }).finally(res=>{
                   this.loading1 = false
               })
            }
        },
        created() {
            Object.assign(this.$data, this.$options.data())
        },
        watch:{
            'coursemodal.taskexercisesManagerFlag'(val){
                if(val){
                   this.getTaskexercisesList();
                }
            },
            taskexercisesGenerateFlag(val){
                if(val){
                    this.getsubList()
                }
            },
            /**
             * 判断是不是生成任务，如果是则取出该课程所有的题目，反之剔除已经取出的
             */
            isExercise(){
                this.getsubList()
            }
        }
    }
</script>

<style scoped>

</style>